<!-- pages/index/index.vue -->
<template>
	<view class="container">
		<!-- 顶部视频 -->
		<view class="video-container" :style="{height: videoHeight}">
			<video v-show="videoData.videoUrl" id="myVideo" class="video" :src="videoData.videoUrl"
				:poster="poster" autoplay :controls="false" object-fit="cover"></video>
			<image v-show="!videoData.videoUrl" class="video-player" :src="videoData.srcImgUrl" mode="aspectFill"></image>
		</view>

		<swiper @change="swiperChange" :current="swiperIndex" :duration="500" class="swiperContainer">
			<swiper-item>
				<view class="collapse-container">
					<!-- 联系我模块 - 改为可折叠 -->
					<u-collapse class="collapse-section" accordion :value="collapseValue" @change="collapseChange">
						<u-collapse-item title="联系我" name="contact" icon="account">
							<view class="contact-card">
								<view class="contact-info">
									<view class="info-item">
										<u-icon name="man-add" size="20" color="#606266"></u-icon>
										<text class="info-text">姓名：{{cardInfo.name}}</text>
									</view>
									<view class="info-item">
										<u-icon name="phone" size="20" color="#606266"></u-icon>
										<text class="info-text">电话：{{cardInfo.mobile}}</text>
									</view>
									<view class="info-item">
										<u-icon name="home" size="20" color="#606266"></u-icon>
										<text class="info-text">公司：{{cardInfo.companyName}}</text>
									</view>
									<view class="info-item">
										<u-icon name="star" size="20" color="#606266"></u-icon>
										<text class="info-text">职位：{{cardInfo.position}}</text>
									</view>
									<view class="info-item">
										<u-icon name="email" size="20" color="#606266"></u-icon>
										<text class="info-text">邮箱：{{cardInfo.email}}</text>
									</view>
									<view class="info-item">
										<u-icon name="map" size="20" color="#606266"></u-icon>
										<text class="info-text">地址：{{cardInfo.companyAddress}}</text>
									</view>
								</view>
					
								<view class="action-buttons">
									<u-button type="primary" size="mini" icon="phone" @click="makePhoneCall">打电话</u-button>
									<u-button type="warning" size="mini" icon="chat" @click="sendSMS">发短信</u-button>
									<!-- <u-button type="error" size="mini" icon="map" @click="openMap">导航</u-button> -->
									<u-button type="success" size="mini" icon="weixin-fill" @click="addWeChat">加微信</u-button>
								</view>
							</view>
						</u-collapse-item>
						<u-collapse-item title="产品橱窗" name="showcase" icon="photo">
							<view class="showcase">
								<scroll-view scroll-x class="product-scroll">
									<view class="product-list">
										<view class="product-item" v-for="(item, index) in productList" :key="index"
											@click="viewProductDetail(item)">
											<image class="product-image" :src="item.imgUrl" mode="aspectFill"></image>
											<text class="product-name">{{item.name}}</text>
										</view>
									</view>
								</scroll-view>
							</view>
						</u-collapse-item>
					</u-collapse>
					<view class="button-container flex justify-between">
						<view v-if="videoCount == 0" style="width: 50vw;">
							<u-button @click="goCreate" shape="circle" icon="plus" >创建我的数字人</u-button>
						</view>
						<view v-else style="width: 50vw;">
							<u-button @click="goHome" shape="circle" icon="home" >回到首页</u-button>
						</view>
						<view style="width: 50vw;">
							<u-button type="primary" shape="circle" icon="server-man" @click="toggleAIChat">咨询AI客服</u-button>
						</view>
						
					</view>
				</view>
				
				
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="aiChatBox">
						<view class="flex justify-end">
							<view class="aiChatBox-buttonGroup flex pt-10 pr-10">
								<!-- <u--text @click="expandBtnClick" prefixIcon="arrow-up" iconStyle="font-size: 14px" color="#999" size="14" text="展开"></u--text>
								<view style="width: 20rpx;"></view> -->
								<u--text @click="goBackBtnClick" prefixIcon="close" iconStyle="font-size: 14px" color="#999" size="14" text="返回"></u--text>
							</view>
						</view>
						<aiChatBox :wechatUserId="wechatUserId"></aiChatBox>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	import api from "@/api/api";
	import aiChatBox from "@/pages/aiChat/aiChatBox"
	export default {
		data() {
			return {
				wechatUserId: null,
				videoData: {},
				poster: null,
				collapseValue: 'showcase', // 默认展开产品橱窗
				showChat: false,
				swiperIndex: 0,
				inputMessage: '',
				messages: [{
					role: 'ai',
					content: '您好！我是AI助手，有什么可以帮您的吗？'
				}],
				scrollTop: 0,
				cardInfo: {},
				videoCount: 0,
				videoHeight: '100vw',
				productList: [
				],
				cases: [{
						title: '某银行智能客服系统',
						desc: '为客户提供24小时智能咨询服务',
						image: '/static/case1.jpg'
					},
					{
						title: '政府大数据平台',
						desc: '实现政务数据可视化分析',
						image: '/static/case2.jpg'
					}
				],
				news: [{
						title: '公司荣获2023年度科技创新奖',
						date: '2023-05-15'
					},
					{
						title: '新产品发布会圆满成功',
						date: '2023-04-20'
					},
					{
						title: '与某知名企业达成战略合作',
						date: '2023-03-10'
					}
				]
			}
		},
		components: {
			aiChatBox
		},
		onLoad(option) {
			// option.wechatUserId = 5;
			// option = {
			// 	wechatUserId: 5
			// }
			try {
				if (option) {
					if (option.scene) {
						this.wechatUserId = option.scene;
					}
					if (option.wechatUserId) {
						this.wechatUserId = option.wechatUserId;
					}
					this.loadAiVideo()
					this.loadCardInfo()
					this.loadAiVideoCount()
					this.loadProductList()
				} else {
					throw new Error("数字人信息加载失败")
				}
			} catch (e) {
				console.log(e)
				this.$refs.toast.show({
					type: "error",
					title: "提示",
					message: "数字人信息加载失败"
				});
			}
		},
		methods: {
			loadAiVideo() {
				this.depot.get(api.aiCard("aiVideo/findDefaultAiVideoByWechatUserId?wechatUserId=" + this.wechatUserId))
				.then((res) => {
					if (res && res.data && res.data.data) {
						this.videoData = res.data.data;
						this.poster = this.videoData.videoUrl ? this.videoData.videoUrl + "?x-oss-process=video/snapshot,t_0,f_jpg,w_512,h_512,m_fast" : this.videoData.srcImgUrl;
					} else {
						throw new Error("数字人信息加载失败")
					}
				})
			},
			loadCardInfo() {
				this.depot.get(api.aiCard("cardInfo/findCardInfoByWechatUserId?wechatUserId=" + this.wechatUserId))
				.then((res) => {
					if (res && res.data && res.data.data) {
						this.cardInfo = res.data.data;
						// this.videoData = res.data.data;
						// this.poster = this.videoData.videoUrl ? this.videoData.videoUrl + "?x-oss-process=video/snapshot,t_0,f_jpg,w_512,h_512,m_fast" : this.videoData.srcImgUrl;
					} else {
						throw new Error("数字人信息加载失败")
					}
				})
			},
			loadAiVideoCount() {
				let res = this.depot.get(api.aiCard("aiVideo/findVideoCount"))
				.then(res => {
					this.videoCount = res && res.data && res.data.data ? res.data.data : 0;
				})
			},
			loadProductList() {
				let url = "product/findProductPage?page=0&size=10";
				this.depot.post(api.aiCard(url), null).
				then(response => {
					if (response && response.data && response.data.data) {
						this.productList = this.productList.concat(response.data.data.content);
					}
				})
			},
			goHome() {
				uni.reLaunch({
					url:"/pages/index/menus"
				})
			},
			goCreate() {
				uni.reLaunch({
					url:"/pages/aiPerson/createAiPersonTips"
				})
			},
			collapseChange(value) {
				this.collapseValue = value;
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.cardInfo.mobile
				});
			},
			sendSMS() {
				uni.sendSms({
					phoneNumber: this.cardInfo.mobile,
					content: '您好，我想咨询...'
				});
			},
			openMap() {
				uni.openLocation({
					latitude: 39.996794,
					longitude: 116.316384,
					name: '某某科技有限公司',
					address: '北京市海淀区中关村软件园'
				});
			},
			addWeChat() {
				if (this.cardInfo.wechatNumber) {
					uni.showModal({
						title: '添加微信',
						content: '微信号：' + this.cardInfo.wechatNumber,
						showCancel: false,
						confirmText:"复制",
						success: () => {
							uni.setClipboardData({
							  data: this.cardInfo.wechatNumber,
							  success: () => { uni.showToast({ title: '复制成功' }); },
							  fail: (err) => { console.log('复制失败', err); }
							});
						}
					});
				} else {
					this.$refs.toast.show({
						type: "error",
						title: "提示",
						message: "他/她暂未添加微信号"
					});
				}
				
			},
			viewProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				});
			},
			toggleAIChat() {
				// this.showChat = !this.showChat;
				console.log("in toggleAIChat", this.swiperIndex)
				this.swiperIndex = 1;
				this.$forceUpdate()
			},
			sendMessage() {
				if (!this.inputMessage.trim()) return;

				// 添加用户消息
				this.messages.push({
					role: 'user',
					content: this.inputMessage
				});

				// 模拟AI回复
				setTimeout(() => {
					this.messages.push({
						role: 'ai',
						content: this.getAIResponse(this.inputMessage)
					});
					this.scrollToBottom();
				}, 800);

				this.inputMessage = '';
				this.scrollToBottom();
			},
			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollTop = 99999;
				});
			},
			getAIResponse(question) {
				// 简单模拟AI回复
				const responses = [
					'我理解您的问题是关于' + question + '，我们的产品可以很好地解决这个问题。',
					'感谢您的咨询，关于' + question + '，我们的专家可以为您提供详细解答。',
					question + '是我们公司的优势领域，您可以查看我们的案例了解更多。',
					'我已经记录下您的问题' + question + '，稍后会有专员联系您。'
				];
				return responses[Math.floor(Math.random() * responses.length)];
			},
			swiperChange(e) {
				this.swiperIndex = e && e.detail ? e.detail.current : 0;
			},
			goBackBtnClick() {
				console.log("in goBackBtnClick")
				this.swiperIndex = 0;
				this.$forceUpdate()
			},
			expandBtnClick() {
				this.videoHeight = '0rpx'
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100vh;
		padding-bottom: 100rpx;
		background-color: #fff;
	}

	.video-container {
		width: 100%;
		background-color: #fff;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.contact-card {
		background-color: #fff;

		.contact-header {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.title {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.contact-info {
			padding: 20rpx 0;

			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.info-text {
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}
		}

		.action-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.u-btn {
				flex: 1;
				margin: 0 10rpx;
			}
		}
	}

	.showcase {
		.section-header {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			.title {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.product-scroll {
			white-space: nowrap;
			width: 100%;

			.product-list {
				display: inline-flex;
				min-height: 400rpx;
			}

			.product-item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				width: 300rpx;

				.product-image {
					width: 300rpx;
					height: 300rpx;
					border-radius: 10rpx;
				}

				.product-name {
					margin-top: 10rpx;
					font-size: 26rpx;
					white-space: normal;
					text-align: center;
				}
			}
		}
	}

	.collapse-section {
		margin: 20rpx;

		.case-content {
			padding: 20rpx;

			.case-item {
				display: flex;
				margin-bottom: 20rpx;

				.case-image {
					width: 200rpx;
					height: 150rpx;
					border-radius: 8rpx;
				}

				.case-info {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.case-title {
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.case-desc {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}

		.news-content {
			padding: 20rpx;

			.news-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.news-title {
					font-size: 28rpx;
				}

				.news-date {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
					display: block;
				}
			}
		}
	}

	.ai-button {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		margin-left: 20rpx;
		width: calc(100vw - 40rpx);
		.u-btn {
			width: 80%;
			height: 80rpx;
			font-size: 32rpx;
		}
	}

	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.chat-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			font-size: 32rpx;
			font-weight: bold;
		}

		.chat-messages {
			flex: 1;
			padding: 20rpx;

			.message {
				display: flex;
				margin-bottom: 30rpx;

				&.ai {
					flex-direction: row;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				&.user {
					flex-direction: row-reverse;

					.bubble {
						background-color: #2979ff;
						color: #fff;
					}
				}

				.bubble {
					max-width: 70%;
					padding: 20rpx;
					border-radius: 10rpx;
					background-color: #f5f5f5;
					font-size: 28rpx;
					line-height: 1.5;
				}
			}
		}

		.chat-input {
			display: flex;
			padding: 20rpx;
			border-top: 1rpx solid #f5f5f5;

			.u-input {
				flex: 1;
				margin-right: 20rpx;
				background-color: #f5f5f5;
				border-radius: 50rpx;
				padding: 0 20rpx;
			}
		}
	}
	
	.collapse-container {
		position: relative;
		height: calc(100vh - 100vw);
	}
	
	.button-container {
		position: absolute;
		width: calc(100vw - 40rpx);
		left: 20rpx;
		bottom: env(safe-area-inset-bottom);
	}
	
	.swiperContainer {
		height: calc(100vh - 100vw);
	}
	
	.aiChatBox {
		position: relative;
		height: calc(100vh - 100vw - 25rpx);
	}
</style>